<template>
  <view :data-theme="globPrimary">
    <u-navbar title="机构" :border-bottom="false" :custom-back="onBack">
      <view slot="right" class="navbar-right">
        <u-icon
          name="shaixuan"
          custom-prefix="edu-icon"
          size="40"
          :color="globPrimaryColor"
          @click="openEntry"
        ></u-icon>
      </view>
    </u-navbar>

    <view class="course-scroll">
      <edu-mescroll-body @init="mescrollInit" @down="refresh" @up="getList">
        <view class="content">
          <view
            class="mechanism_item"
            v-for="(i, k) in courseList"
            :key="k"
            @click="toMechanism(i)"
          >
            <view class="circle">
              <!-- #ifndef MP-WEIXIN -->
              <courseImage
                width="120"
                borderRadius="60"
                height="120"
                :image="i.logo_url"
              ></courseImage>
              <!-- #endif -->

              <!-- #ifdef MP-WEIXIN -->
              <edu-image width="120" height="120" border-radius="60" :src="i.logo_url"></edu-image>
              <!-- #endif -->
            </view>
            <view class="mechanism_left">
              <view class="mechanism_title u-line-1">{{ i.title }}</view>
              <view class="mechanism_text u-line-2">{{ i.intro }}</view>
            </view>
          </view>
        </view>
      </edu-mescroll-body>
    </view>

    <!-- 下拉列表 -->
    <u-popup v-model="show" mode="right" width="100%" :mask="false">
      <view :style="{ height: globStatusBarHeight + 'px', width: '100%' }"></view>
      <u-icon
        @click="show = false"
        name="close"
        class="category-close"
        :style="{ top: globStatusBarHeight + 15 + 'px' }"
      ></u-icon>
      <view class="category-title u-border-bottom">机构</view>
      <view
        class="category-wrap"
        :style="{
          height: globWindowHeight - globStatusBarHeight - 50 + 'px',
        }"
      >
        <scroll-view
          scroll-y
          scroll-with-animation
          class="tab-view menu-scroll-view"
          :scroll-top="scrollTop"
        >
          <view
            v-for="(item, index) in categoryList"
            :key="index"
            class="tab-item"
            :class="[current == index ? 'active' : '']"
            @tap.stop="swichMenu(index)"
          >
            <text class="u-line-1">{{ item.title }}</text>
          </view>
        </scroll-view>
        <block v-for="(item, index) in categoryList" :key="index">
          <view class="right-box" v-if="current == index">
            <scroll-view scroll-y>
              <view class="page-view">
                <view
                  class="class-title"
                  :class="[categoryId == item.id ? 'active' : '']"
                  @click="chooseCategoryId(item.id)"
                >
                  <text>全部</text>
                  <u-icon name="arrow-right"></u-icon>
                </view>
                <view class="class-item" v-for="(item1, index1) in item.child" :key="index1">
                  <!-- #ifdef H5 -->
                  <view
                    class="item-title"
                    :class="[categoryId == item1.id ? 'active' : '']"
                    @click="chooseCategoryId(item1.id)"
                  >
                    <text class="u-line-1">{{ item1.title }}</text>
                    <u-icon name="arrow-right"></u-icon>
                  </view>
                  <!-- #endif -->
                  <!-- #ifndef H5 -->
                  <view class="item-title" @click="chooseCategoryId(item1.id)">
                    <text
                      class="u-line-1"
                      v-if="categoryId == item1.id"
                      :style="{
                        color: globPrimaryColor,
                      }"
                      >{{ item1.title }}</text
                    >
                    <text class="u-line-1" v-else>{{ item1.title }}</text>
                    <u-icon name="arrow-right"></u-icon>
                  </view>
                  <!-- #endif -->
                  <view class="item-container">
                    <view class="thumb" v-for="(item2, index2) in item1.child" :key="index2">
                      <!-- #ifdef H5 -->
                      <view
                        class="name u-line-1"
                        :class="[categoryId == item2.id ? 'active' : '']"
                        @click="chooseCategoryId(item2.id)"
                        >{{ item2.title }}</view
                      >
                      <!-- #endif -->
                      <!-- #ifndef H5 -->
                      <view
                        class="name u-line-1"
                        v-if="categoryId == item2.id"
                        :style="{
                          color: globPrimaryColor,
                        }"
                        @click="chooseCategoryId(item2.id)"
                        >{{ item2.title }}</view
                      >
                      <view class="name u-line-1" v-else @click="chooseCategoryId(item2.id)">{{
                        item2.title
                      }}</view>
                      <!-- #endif -->
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </block>
      </view>
    </u-popup>
  </view>
</template>

<script>
import courseImage from '@/components/common/courseImage.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    courseImage,
  },
  data() {
    return {
      courseList: [],
      show: false,
      current: 0,
      scrollTop: 0,
      menuHeight: 0, // 左边菜单的高度
      menuItemHeight: 0, // 左边菜单item的高度
      categoryList: [],
      categoryId: 0,
      params: {
        mhm_id: 1,
      },
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
      globWindowHeight: 'projectSetting/globWindowHeight',
    }),
  },
  onLoad() {
    this.getCategoryList()
  },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false
    }
    this.onBack()
    return true
  },
  methods: {
    //展开列表
    openEntry() {
      this.show = true
    },
    // 获取分类数据
    getCategoryList() {
      this.$edu.api
        .getCategory({
          ...this.params,
          type: 2,
        })
        .then((res) => {
          const { data } = res
          this.categoryList = data
        })
    },
    // 下拉刷新
    refresh() {
      this.mescroll.resetUpScroll()
    },
    getList(page) {
      this.$edu.api
        .getSchoolList({
          page: page.num,
          count: page.size,
          ...this.params,
        })
        .then((res) => {
          const { data } = res
          let list = data.data
          let total = data.total

          if (page.num == 1) this.courseList = []
          this.courseList = this.courseList.concat(list)
          this.mescroll.endBySize(list.length, total)
        })
    },
    toMechanism(item) {
      // #ifdef H5
      window.location.href = `${item.sdn}`
      // #endif
      // #ifndef H5
      this.$u.route('pageFound/school/home', {
        id: item.id,
      })
      // #endif
    },
    // 点击左边的栏目切换
    async swichMenu(index) {
      if (index == this.current) return
      this.current = index
      // 如果为0，意味着尚未初始化
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        await this.getElRect('menu-scroll-view', 'menuHeight')
        await this.getElRect('tab-item', 'menuItemHeight')
      }
      // 将菜单菜单活动item垂直居中
      this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2
    },
    // 获取一个目标元素的高度
    getElRect(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this)
        query
          .select('.' + elClass)
          .fields({ size: true }, (res) => {
            // 如果节点尚未生成，res值为null，循环调用执行
            if (!res) {
              setTimeout(() => {
                this.getElRect(elClass)
              }, 10)
              return
            }
            this[dataVal] = res.height
          })
          .exec()
      })
    },
    // 分类选择
    chooseCategoryId(id) {
      if (id == this.categoryId) return
      this.categoryId = id
      this.show = false
      this.params = {
        ...this.params,
        category: id,
      }
      this.mescroll.resetUpScroll(false)
      this.mescroll.scrollTo(0, 0)
    },
    // 返回上一页
    onBack() {
      let pages = getCurrentPages()
      let page = pages[pages.length - 2]
      if (this.$u.test.empty(page)) {
        this.$u.route({ type: 'switchTab', url: 'pages/index/index' })
      } else {
        this.$u.route({ type: 'back' })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
/* #ifdef APP-PLUS */
/deep/.u-close {
  top: 40px !important;
}
/* #endif */
.navbar-right {
  margin-right: 30rpx;
  display: flex;
  align-items: center;
}

.slot-wrap {
  display: flex;
  align-items: center;
  flex: 1;
}

.course-scroll {
  height: calc(100vh - 44px);
}

.right-item {
  margin: 0 12rpx;
  position: relative;
  color: #ffffff;
  display: flex;
}

.content {
  height: auto;
  width: 100%;
  background-color: #ffffff;
  padding-top: 6rpx;

  .mechanism_item {
    height: 220rpx;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    overflow: hidden;

    .circle {
      height: 140rpx;
      width: 140rpx;
      border-radius: 50%;
      border: 1px solid #f7f7f7;
      margin-left: 30rpx;
      margin-top: 40rpx;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        height: 90%;
        width: 90%;
        margin-left: 5%;
        margin-top: 5%;
        border-radius: 50%;
      }
    }

    .mechanism_left {
      height: 140rpx;
      width: 510rpx;
      overflow: hidden;
      margin-left: 40rpx;
      overflow: hidden;
      margin-top: 40rpx;

      .mechanism_title {
        height: 45rpx;
        width: 100%;
        font-size: 32rpx;
        color: #303133;
        font-weight: bold;
        line-height: 45rpx;
        margin-top: 9rpx;
      }

      .mechanism_text {
        height: 74rpx;
        width: 100%;
        overflow: hidden;
        font-size: 26rpx;
        line-height: 37rpx;
        color: #909399;
        margin-top: 12rpx;
      }
    }
  }
}

.content .mechanism_item:not(:last-child) {
  border-bottom: 1px solid #f7f7f7;
}

.category-close {
  position: absolute;
  left: 30rpx;
  z-index: 10;
}

.category-title {
  height: 100rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: $edu-main-color;
  display: flex;
  align-items: center;
  justify-content: center;
}
.category-wrap {
  display: flex;
  overflow: hidden;
  background-color: #fff;
  .tab-view {
    width: 210rpx;
    height: 100%;
    background: #f7f7f7;
    .tab-item {
      height: 120rpx;
      padding: 0 10rpx;
      background: #f7f7f7;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: $edu-content-color;
      font-weight: 400;
      &.active {
        position: relative;
        font-size: 30rpx;
        font-weight: 500;
        color: $edu-main-color;
        background-color: #ffffff;
        &::before {
          content: '';
          position: absolute;
          border-left-width: 6rpx;
          border-left-style: solid;
          @include border-color();
          height: 120rpx;
          left: 0;
          top: 0;
        }
      }
    }
  }
  .right-box {
    width: calc(100vw - 210rpx);
  }
  .page-view {
    padding: 30rpx;
    background-color: #fff;
    .class-title {
      font-size: 30rpx;
      font-weight: 500;
      color: $edu-main-color;
      margin-bottom: 50rpx;
      &.active {
        @include text-color();
      }
    }
    .class-item {
      border-radius: 8rpx;
      .item-title {
        display: flex;
        font-size: 30rpx;
        font-weight: 500;
        color: $edu-main-color;
        margin-bottom: 30rpx;
        &.active {
          @include text-color();
        }
      }
      .item-container {
        display: flex;
        flex-wrap: wrap;
        margin-left: -14rpx;
        margin-right: -14rpx;
        .thumb {
          padding: 0 14rpx;
          margin-bottom: 40rpx;
        }
        .name {
          max-width: 480rpx;
          padding: 0 20rpx;
          height: 64rpx;
          line-height: 64rpx;
          text-align: center;
          background: #f7f7f7;
          border-radius: 32px;
          font-size: 28rpx;
          font-weight: 400;
          color: $u-main-color;
          &.active {
            @include text-color();
          }
        }
      }
    }
  }
}
</style>
